Ajax এবং HTML5 ব্যবহার করে ফাইল আপলোড একটি আধুনিক পদ্ধতি, যা ব্যবহারকারীদের পেজ রিফ্রেশ ছাড়াই ফাইল আপলোড করতে এবং রিয়েল-টাইমে প্রগ্রেস বার বা মেসেজ দেখাতে সক্ষম করে। HTML5 এর FormData অবজেক্ট এবং Ajax এর XMLHttpRequest ব্যবহার করে সহজেই ফাইল আপলোড করা যায়। নিচে একটি উদাহরণসহ ফাইল আপলোডের প্রক্রিয়া ব্যাখ্যা করা হলো।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax File Upload Example</title>
</head>
<body>
<h1>Upload a File</h1>
<form id="uploadForm">
<label for="file">Choose file:</label>
<input type="file" id="file" name="file" required>
<br><br>
<button type="button" onclick="uploadFile()">Upload</button>
</form>
<div id="progress-container" style="display: none;">
<p>Uploading...</p>
<progress id="progressBar" value="0" max="100"></progress>
</div>
<div id="response-container">
<!-- রেসপন্স বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
</div>
<script>
function uploadFile() {
var fileInput = document.getElementById('file');
var file = fileInput.files[0];
if (!file) {
document.getElementById("response-container").innerHTML = "Please select a file to upload.";
return;
}
// FormData অবজেক্ট তৈরি করা এবং ফাইল অ্যাড করা
var formData = new FormData();
formData.append("file", file);
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// POST রিকোয়েস্ট ওপেন করা
xhr.open("POST", "upload_file.php", true);
// প্রগ্রেস ইভেন্ট হ্যান্ডল করা
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
document.getElementById("progressBar").value = percentComplete;
document.getElementById("progress-container").style.display = "block";
}
};
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.getElementById("response-container").innerHTML = xhr.responseText;
} else {
document.getElementById("response-container").innerHTML = "Error uploading file.";
}
document.getElementById("progress-container").style.display = "none";
}
};
// ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
xhr.onerror = function() {
document.getElementById("response-container").innerHTML = "Network error occurred. Please try again.";
};
// রিকোয়েস্ট পাঠানো
xhr.send(formData);
}
</script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<input type="file">) এবং একটি আপলোড বোতাম (<button>) রয়েছে। "Upload" বোতামে ক্লিক করলে uploadFile() ফাংশন কল হবে।<progress>) ব্যবহার করা হয়েছে।response-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে আপলোড রেসপন্স বা ত্রুটি মেসেজ দেখানো হবে।<?php
// চেক করা হচ্ছে যে ফাইল আপলোড করা হয়েছে কিনা
if (isset($_FILES['file'])) {
$file = $_FILES['file'];
// ফাইলের নাম এবং টেম্পোরারি লোকেশন পাওয়া
$fileName = $file['name'];
$fileTmpName = $file['tmp_name'];
$uploadDir = 'uploads/';
$uploadPath = $uploadDir . basename($fileName);
// আপলোড ডিরেক্টরি চেক এবং তৈরি করা (যদি না থাকে)
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0777, true);
}
// ফাইল মুভ করার চেষ্টা করা
if (move_uploaded_file($fileTmpName, $uploadPath)) {
echo "File uploaded successfully: " . $fileName;
} else {
http_response_code(500); // Internal Server Error
echo "Error uploading the file.";
}
} else {
http_response_code(400); // Bad Request
echo "No file was uploaded.";
}
?>
বিস্তারিত ব্যাখ্যা:
$_FILES এর মাধ্যমে আপলোড করা হয়েছে কিনা।uploads/ নামে একটি ডিরেক্টরি চেক করা হয়েছে এবং সেটি না থাকলে তৈরি করা হয়েছে।move_uploaded_file() ফাংশন দিয়ে ফাইলটি টেম্পোরারি লোকেশন থেকে আপলোড ডিরেক্টরিতে মুভ করা হয়েছে।500 সেট করা হয়েছে।JavaScript এবং HTML5:
uploadFile() ফাংশন কল হয়।FormData অবজেক্ট তৈরি করে ফর্ম ডেটা সংগ্রহ করা হয় এবং তা XMLHttpRequest এর মাধ্যমে সার্ভারে পাঠানো হয়।PHP স্ক্রিপ্ট:
Progress Bar:
xhr.upload.onprogress ইভেন্ট হ্যান্ডলার ব্যবহার করে ফাইল আপলোডের প্রগ্রেস দেখানো হয়েছে।FormData এবং XMLHttpRequest ব্যবহার করে ফাইল আপলোড করা হয়েছে।এই উদাহরণটি অনুসরণ করে Ajax এবং HTML5 ব্যবহার করে ফাইল আপলোডের প্রক্রিয়াটি বোঝা যায় এবং এটি ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে প্রয়োজনীয় একটি দক্ষতা।
আরও দেখুন...
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
